<template>
  <section class="inner">
    <section class="inner-top" v-if="!tag" key="user">
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect">
        <el-menu-item index="student">学生用户</el-menu-item>
        <el-menu-item index="management">管理人员</el-menu-item>
      </el-menu>
    </section>
    <section class="inner-top" v-if="tag" key="detail">
      <div><span class="detail-back" @click="back">管辖范围</span><span>></span><span>查看</span></div>
    </section>
    <Student key="student" v-if="activeIndex === 'student'"></Student>
    <Management key="management" v-if="activeIndex === 'management' && !tag" @check="checkDetail"></Management>
    <StudentList key="studentList" :managePersonId="managePersonId" v-if="tag"></StudentList>
  </section>
</template>

<script>
import Student from './Student'
import Management from './Management'
import StudentList from './StudentList'
export default {
  name: 'peopleManagement',
  data () {
    return {
      activeIndex: 'student',
      managePersonId: undefined,
      tag: false
    }
  },
  components: {
    Student: Student,
    Management: Management,
    StudentList: StudentList
  },
  methods: {
    back () {
      this.tag = false
    },
    handleSelect (key) {
      this.activeIndex = key
    },
    checkDetail (id) {
      this.managePersonId = id
      this.tag = true
    }
  }
}
</script>
